import { Input } from '@/components/AntdProxy';
import CommonDrawer from '@/components/CommonDrawer';
import { CrudFormLayout } from '@/components/Crud';
import { REQUIRED } from '@/constants/rules';
import request from '@/utils/request';
import { useAsyncEffect } from 'ahooks';
import { Form, message } from 'antd';
const Save = (props) => {
  const { open, record, onCancel, onOk } = props;
  const [form] = Form.useForm();
  useAsyncEffect(() => {
    if (open && record) {
      form.setFieldsValue({
        ...record,
      });
    }
  }, [open, record]);

  const handleOk = async () => {
    const values = await form.validateFields();
    console.log('values', values);
    const url = record ? '/datas/customer/update' : '/datas/customer/add';
    const params = {
      ...values,
    };
    if (record) {
      params.customerId = record?.customerId;
    }
    await request({
      url,
      method: 'POST',
      data: params,
    });
    message.success('操作成功');
    onOk?.();
  };

  return (
    <CommonDrawer
      title={record ? '编辑' : '新建'}
      open={open}
      onClose={onCancel}
      onOk={handleOk}
      afterOpenChange={(visible) => {
        if (!visible) {
          form.resetFields();
        }
      }}
      width={800}
      destroyOnHidden
    >
      <Form form={form} layout="vertical">
        <CrudFormLayout itemMinWidth={250}>
          <Form.Item label="客户编号" name="customerCode">
            <Input placeholder="请输入客户编号" />
          </Form.Item>
          <Form.Item label="客户名称" name="customerName" rules={[REQUIRED]}>
            <Input placeholder="请输入客户名称" />
          </Form.Item>
          <Form.Item label="联系人" name="contacts">
            <Input placeholder="请输入联系人" />
          </Form.Item>
          <Form.Item label="联系电话" name="phone">
            <Input placeholder="请输入联系电话" />
          </Form.Item>
          <Form.Item label="地址" name="address">
            <Input placeholder="请输入地址" />
          </Form.Item>
          <Form.Item label="付款帐号" name="account">
            <Input placeholder="请输入付款帐号" />
          </Form.Item>
          <Form.Item label="银行名称" name="bankName">
            <Input placeholder="请输入银行名称" />
          </Form.Item>
          <Form.Item label="银行行号" name="bankCode">
            <Input placeholder="请输入银行行号" />
          </Form.Item>
        </CrudFormLayout>
        <Form.Item label="备注" name="remark">
          <Input.TextArea maxLength={150} />
        </Form.Item>
      </Form>
    </CommonDrawer>
  );
};

export default Save;
